<template>
  <view v-if="shenheStatus != 1" class="page">
    <template v-if="user_info">
      <view class="m-box mutate">
        <view class="title">{{ type === "0" ? "转赠数量" : "转赠金额" }}</view>

        <view class="input">
          <view class="text">¥</view>
          <view class="con">
            <u-input
              placeholder="请输入金额"
              v-if="type !== '0'"
              v-model="value"
              type="digit"
              clearable
              @blur="getPrice"
              :custom-style="customStyle"
              :placeholderStyle="placeholderStyle"
            ></u-input>
            <u-input
              placeholder="请输入转赠数量"
              v-model="value"
              v-else
              type="number"
              clearable
              @blur="getPrice"
              :custom-style="customStyle"
              :placeholderStyle="placeholderStyle"
            ></u-input>
          </view>

          <!-- <i class="iconfont icon-reeor-fill"></i> -->
        </view>
        <view class="des">
          可转赠{{ getTotalNumber[0] }}{{ type === "0" ? "积分" : "元" }}，<text
            @click="value = getTotalNumber[0]"
            >{{ type === "2" ? "全部转换" : "全部转赠" }}</text
          >
        </view>
      </view>

      <view class="m-box info" v-if="type !== '2'">
        <view class="m-inp">
          <view class="label">对方手机号</view>
          <view class="con">
            <u-input
              placeholder="请输入手机号"
              v-model="mobile"
              type="number"
              clearable
            ></u-input>
          </view>
        </view>
        <view class="infoList" v-if="userList.length">
          <view class="item" v-for="item of userList" :key="item.id">
            <image mode="aspectFill" :src="item.avatar"></image>

            <view class="name">{{ item.name }}</view>
          </view>
        </view>
      </view>

      <view class="ts">{{ title }}手续费{{ getTotalNumber[1] }}%</view>
      <view
        class="m-box"
        @click="
          $utils.toUrl(`/marketing/mutate/record?type=${type}`, 'navigate')
        "
      >
        <view class="m-inp">
          <view class="label">转赠记录</view>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>

      <view :class="['btn', value ? '' : 'disabled']" @click="submit"
        >确定转赠</view
      >
    </template>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import {
  giveAssets,
  searchUser,
  commissionToBalance,
  getProfit,
} from "@/api/user";
import utils from "@/common/utils";
import { regMobile } from "@/common/regExp";

export default {
  components: {
    Shenhe,
  },

  data() {
    return {
      type: "0", // 0.积分转赠 1.余额转赠 2.佣金转余额
      value: "",
      customStyle: {
        fontSize: "80rpx",
        height: "100rpx",
      },
      mobile: "",
      user_info: null,
      placeholderStyle: "font-size:40rpx;color:#B6B6B6;font-weight: normal;",
      disabled: false,
      userList: [],
      profit: {
        commission_to_balance: 0,
        give_balance_profit: 0,
        give_integral_profit: 0,
      },
      title: "",
    };
  },

  async onLoad(opi) {
    try {
      let { type } = opi,
        title = "积分转赠";
      switch (String(type)) {
        case "1":
          title = "余额转赠";
          break;

        case "2":
          title = "佣金转余额";
      }

      this.type = type || "0";
      uni.setNavigationBarTitle({ title });
      this.title = title;
      const res = await getProfit();
      if (res.data) {
        this.profit = res.data;
      }
    } catch (error) {
      utils.toast(error);
    }
  },

  onShow() {
    this.$allrequest.request.userindex({}, false).then((res) => {
      if (res.code == 0) {
        if (res.data.user_info && res.data.user_info.id > 0) {
          uni.setStorageSync("userInfo", res.data.user_info);
          this.user_info = res.data.user_info;
        }
      }
    });
  },

  computed: {
    getTotalNumber() {
      let { user_info, type, profit: objProfit } = this,
        total = 0,
        profit = 0;
      if (!user_info) return [total, profit];

      switch (type) {
        case "0":
          total = user_info.integral;
          profit = objProfit.give_integral_profit;
          break;

        case "1":
          total = user_info.money;
          profit = objProfit.give_balance_profit;
          break;

        case "2":
          total = user_info.price;
          profit = objProfit.commission_to_balance;
          break;
      }

      return [total, profit];
    },
  },

  watch: {
    mobile() {
      this.searchUser();
    },

    value(e) {
      let { getTotalNumber } = this;
      if (parseFloat(e) > parseFloat(getTotalNumber[0])) {
        this.$nextTick(() => {
          this.value = getTotalNumber[0];
        });
      }
    },
  },

  methods: {
    getPrice() {
      let { type, value } = this;

      if (type !== "0") {
        this.value = parseFloat(value).toFixed(2);
      } else {
        this.value = parseInt(value);
      }
    },

    searchUser: utils.debounce(async (that) => {
      try {
        let { mobile } = that;
        if (regMobile(mobile)) {
          const res = await searchUser({
            mobile,
          });
          if (res.data) {
            that.userList = [res.data];
          }
          return;
        }

        that.userList = [];
      } catch (error) {
        utils.toast(error);
      }
    }, 500),

    submitCallBack(res) {
      this.disabled = false;

      if (!res.code) {
        utils.showModal("提示", "操作成功！", false, () => {
          utils.goBack();
        });
        return;
      }
      utils.toast(res.msg);
    },

    async submit() {
      let { disabled, type, userList, value } = this;

      if (disabled || !value) return;

      try {
        this.disabled = true;
        if (type === "2") {
          const res = await commissionToBalance(
            {
              price: value,
            },
            true
          );
          this.submitCallBack(res);
        } else {
          if (!userList.length) return utils.toast("请选择转赠人！");
          const res = await giveAssets(
            {
              type: type === "0" ? "1" : "2",
              give_user_id: userList[0].id,
              money: value,
            },
            true
          );
          this.submitCallBack(res);
        }
      } catch (error) {
        this.disabled = false;
        utils.toast(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// opacity: 0.2;
.page {
  padding: 24rpx;
  min-height: 100vh;
  background: #f2f2f2;
}

.m-box {
  padding: 0 24rpx;
  background: #fff;
  border-radius: 20rpx;
}

.mutate {
  margin-bottom: 24rpx;
  padding-top: 30rpx;
  font-weight: bold;

  .title {
    font-size: 30rpx;
  }

  .input {
    display: flex;
    align-items: center;
    padding: 30rpx 0 20rpx;
    border-bottom: 1px solid #f8f8f8;
  }

  .text {
    padding-top: 14rpx;
    font-size: 56rpx;
  }

  .con {
    flex: 1;
    overflow: hidden;
    margin-left: 10rpx;
  }

  .des {
    padding: 30rpx 0;
    font-size: 24rpx;
    color: #8c8c8c;

    text {
      color: #f0250e;
      font-weight: bold;
    }
  }
}

.m-inp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;

  .label {
    font-size: 30rpx;
    color: #262626;
  }

  .con {
    flex: 1;
    overflow: hidden;
    margin-left: 60rpx;
  }

  .icon-arrow-right {
    font-size: 22rpx;
    color: #8c8c8c;
  }
}

.infoList {
  padding: 15rpx 0;
  border-top: 1px solid #f8f8f8;
  .item {
    padding: 15rpx 0;
    display: flex;
    align-items: center;

    image {
      width: 70rpx;
      height: 70rpx;
      border-radius: 10rpx;
      background: #f2f2f2;
    }

    .name {
      flex: 1;
      overflow: hidden;
      margin-left: 20rpx;
    }
  }
}

.ts {
  padding: 24rpx 0;
  font-size: 24rpx;
  color: #999;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 80rpx;
  height: 88rpx;
  background: rgb(240, 37, 14);
  border-radius: 32px;
  color: #fff;
  font-size: 32rpx;

  &.disabled {
    background: rgba(240, 37, 14, 0.2);
  }
}
</style>
